<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="map" ref="map">

    </div>
    <script type="text/javascript">

        let _this = this;
        let option = {
            // 加载 amap 组件
            amap: {
                // 高德地图中心经纬度
                center: [105.397428, 38.90923], //中心点
                // 高德地图缩放
                zoom: 4,
                // 启用resize
                resizeEnable: true,
                // 自定义地图样式主题
                mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", //地图主题
                // viewMode:'3D',//开启3D视图,默认为关闭
                // expandZoomRange:true,
                // zooms:[3,20],
                // pitch: 40
            },
            tooltip: {
                trigger: 'item',
                show: false
            },
            animation: false,
            series: [
                // 流线
                {
                    coordinateSystem: "amap", // 该系列使用的坐标系是高德地图的坐标系
                    type: "lines", // 该类型用于地图上路线的绘制
                    zlevel: 1, // 相当于z-index
                    effect: { // 线特效的配置
                        show: true,  // 是否显示特效
                        period: 5, // 特效动画的时间
                        trailLength: 0.05, // 特效尾迹的长度 0-1
                        color: "#3437ff", // 特效的颜色
                        symbolSize: 5 // 特效的大小
                    },
                    lineStyle: { // 线的颜色
                        normal: {
                            color: "rgba(47,68,200,0.1)",
                            width: 2,
                            curveness: 0.2
                        }
                    },
                    data: _this.flyLine,
                },
                // 目标点
                {
                    name: '目标点',
                    type: "scatter",
                    // 使用高德地图坐标系
                    coordinateSystem: "amap",
                    // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
                    data: _this.goals,
                    symbolSize: 3,
                    encode: {
                        value: 2
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(98,122,200,0.78)'
                        }
                    }
                },

            ],

        };
        let chart = this.$echarts.init(_this.$refs.map);
        chart.setOption(option);

    </script>
</body>

</html>